<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的收藏</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
				width: 100%;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 20px;
				height: auto;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;
				
				margin: 0;
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			/*头部*/
			.mui-bar-nav{z-index:3;}
			.mui-title .arr{width:.2rem;height:.2rem;display:block;background:url(../../images/work/arrow_gray01.png) no-repeat;position:absolute;bottom:.3rem;right:1.8rem;}
			/*菜单*/
			.mui-bar-nav~.mui-content{padding:0;position:absolute;left:0;top:44px;overflow:hidden;}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:100%;margin:0.02rem 0 0 0;}
			.mui-table-view .mui-media-body{width:6.2rem;float:left;overflow:visible;}
			.mui-table-view .mui-media-body>div{width:100%;float:left;}
			.mui-table-view .mui-media-body .body_view{font-size:.3rem;}
			.mui-table-view .mui-media-body .body_view>span,.mui-table-view .mui-media-body .mui-ellipsis>span{float:left;width:5.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
			.mui-table-view .mui-media-body .mui-ellipsis{color:#666;font-size:.28rem;overflow:visible;}
			.mui-table-view-cells{padding:0 0 .3rem 0;margin-bottom:.15rem;background:#fff;position:sticky;z-index: -10;}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left;}
			.mui-table-view .mui-media-right{float:right;width:1.1rem;position:relative;height:100%;}
			.mui-table-view .icon-more{width:.45rem;float:right;height:.45rem;position:relative;background:url(../../images/work/icon-gd-@2x.png) no-repeat;background-size:100% 100%;}
			.mui-table-view .icon-more>img{margin-top:-.03rem;}
			.mui-table-view-cells>a:not(.mui-btn){margin:0;padding:0;}
			.mui-table-view .zhuangtai{width:1.68rem;float:right;text-align:right;font-size:.28rem;margin-top:-.07rem;overflow:hidden;}
			.mui-push-right:after{content:"";}
			.mui-table-view-cells:after{height:0;}
			.mui-table-view{background:none;position:sticky;}
			.mui-sliders{position:absolute;height:100%;z-index:1;width:100%;}
			.mui-sliders .mui-slider-groups{position: absolute; top:0;bottom: 0;width: 100%;height: auto;}
			.mui-sliders .mui-slider-groups .mui-slider-item {position: relative;display: inline-block;width: 100%;
            height: 100%;vertical-align: top; white-space: normal;}
			/*弹层*/
			.more_message{width:7rem;top:.5rem;background:#fff;border-radius:.06rem;position:absolute;right:.25rem;z-index:5;border:1px solid #e2e2e2;display:none;}
			.more_message .more_message_box{position:relative;width:100%;float:left;padding:.35rem .38rem;box-sizing:border-box;}
			.more_message .more_message_box>i{width:.2rem;height:.2rem;position:absolute;top:-.15rem;right:.15rem;background:url(../../images/work/arrow_up.png) no-repeat;}
			.bg_gray{width:7.5rem;background:rgba(0,0,0,0.3);height:100%;position:fixed;top:-.9rem;z-index:3;right:0;}
			.message_info{font-size:.28rem;}
			.collect_icon{width:.36rem;height:.36rem;float:left;background:url(../../images/jindu/colleci.png) no-repeat;background-size:100% 100%;margin-right:.2rem;margin-top:-.01rem;}
            .mui-popover {
				height: 45px;
				width: 150px;
			}
			.mui-popover .mui-scroll-wrapper{line-height: 30px;padding-left: 20px;}
			.mui-pull-bottom-pocket{visibility: visible;}
			.mui-pull{position: relative;margin-top: 15px;}
			#scroll{width: 100%;}
		</style>
	</head>
	<body>	 
		<div class="mui-content mui-scroll-wrapper" id="scroll">
			<div class="mui-scroll">
				<ul class="mui-table-view">
					<li class="mui-table-view-cells mui-media" v-for="netCollect in myNetCollectList" :oid='netCollect.oid' >
							<div class="mui-media-box">
								<span class="navigate_img" :serviceId="netCollect.serviceId">
									<img class="tjfwl" :src="netCollect.serviceFwztSrc"/>
								</span>
								<div class="mui-media-body">
									<div class="body_view">
										<span :serviceId="netCollect.serviceId">{{netCollect.serviceName}}</span>
										<div class="icon-more" :data-guid="netCollect.oid" :collectType = "netCollect.collectType" :id="netCollect.oid"  ></div></div>
									<div class='mui-ellipsis'> 
										<span :serviceId="netCollect.serviceId">受理机构: {{netCollect.organName}}</span>
									</div>
								</div>
							</div>
						</li>
				</ul>
			</div>
		</div>
		<!--弹层-->
 		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<i></i>
				<div class="message_info">
				     取消收藏
				</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>	
     	<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/swiper.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/app.js"></script>
		<script>
		var pageStart = 0;//当前页码
		var pageSize = 20;//每页显示的条数
		var maxPageNumber = 1;//最大页数
		
		var user  = getUser();//获取注册用户
		var userId = "";//注册用户id
		if(user != null){
			userId = user.userId;
		}
		$(function(){ 
			 $('.mui-bar-nav~.mui-content').height($(window).height()-45+'px')
		});
		mui.init({
				pullRefresh: {
					container: '#scroll',
					down: {
						
						callback: pulldownRefresh
					},
					up: {
						auto:true,//可选,默认false.自动上拉加载一次
						contentrefresh: '正在加载...',
						contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullupRefresh
					}
				}
			});
			
			var news = new Vue({
				  el: '#scroll',
				  data: {
				  	myNetCollectList:[]
				  }
				  
			});
			
		 
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				//重置上拉加载
				mui('#scroll').pullRefresh().refresh(true); 
				//重置页码为1
			    pageStart=1;
			    //刷新数据的方法
	       		downRefresh(pageStart,pageSize);
			    
			}
 			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				pageStart++;//翻下一页
		        if(pageStart<=maxPageNumber){
		       		loadMore(pageStart,pageSize);//具体取数据的方法
		        }else{
		        		mui('#scroll').pullRefresh().endPullupToRefresh(true);
		        }
			}
			
			function loadMore(pageStart,pageSize) {
				var param = 'userId=' + userId +'&pageNumber=' + pageStart+ '&random=' + Math.random()+'&pageSize=' + pageSize;
				var url = 'appHttpService/getMyCollectList.do';
			    utils.ajax(url, function(data) {
 					data = JSON.parse(data); 
 					if(data.state == 0 && data.total > 0) {
						maxPageNumber = data.maxPageNumber; 
						var rows = JSON.parse(data.netUserCollectVo);
						if(rows != null && rows.length > 0){
 							var collectTypeMap =JSON.parse(data.collectTypeMap) ; 
							news.myNetCollectList = news.myNetCollectList.concat(convert(rows,collectTypeMap)); 
							mui('#scroll').pullRefresh().endPullupToRefresh(false);
						}else{
							mui('#scroll').pullRefresh().endPullupToRefresh(true);
						}
					}else if(data.state == 0 && data.total == 0) {
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}, param);
				
			}
			function downRefresh(pageStart,pageSize) {
				var param = 'userId='+ userId +'&pageNumber=' + pageStart+ '&random=' + Math.random()+'&pageSize=' + pageSize;
				var url = 'appHttpService/getMyCollectList.do';
			    utils.ajax(url, function(data) {
 					data = JSON.parse(data); 
 					if(data.state == 0 && data.total > 0) {
						maxPageNumber = data.maxPageNumber; 
						var rows = JSON.parse(data.netUserCollectVo);
						if(rows != null && rows.length > 0){
 							var collectTypeMap =JSON.parse(data.collectTypeMap) ; 
 							news.myNetCollectList =  convert(rows,collectTypeMap);  
							mui('#scroll').pullRefresh().endPulldownToRefresh(false);
						}else{
							mui('#scroll').pullRefresh().endPulldownToRefresh(true);
						}
					}else if(data.state == 0 && data.total == 0) {
						mui('#scroll').pullRefresh().endPulldownToRefresh(true);
					}
				}, param);
				
			}
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items,collectTypeMap) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						oid: item.oid,
						serviceId:item.serviceId,
						labelId: item.labelId,
						collectType: getStaticParas(collectTypeMap,item.collectType),
						serviceName: item.serviceName,
						organName:item.organName,
						implementCode: item.implementCode,
						serviceFwztSrc:getServiceFwztSrc(item.code),
						code: item.code
 					}); 
				});
				return newItems;
			}	
			//通过值查找出静态变量中对应的文字
			function getStaticParas(collectTypeMap,collectType){
				var val = "";  
				$.each(collectTypeMap, function(key, value) { 
					$.each(value, function(key, value) { 
						if(collectType == key){
							 val = value; 
                			 return false;//用false结束循环  
						}
					}); 
				}); 
				return val;  
			}
			
			/**
			 * 获取服务事项的服务主题显示
			 */
			function getServiceFwztSrc(subjectClassificationCode){
				var src="../../images/index/collect_icon.png";
				/*if(subjectClassificationCode != null && subjectClassificationCode != '' && subjectClassificationCode != undefined){
					src = '';
				}*/
				return src;
			}
			
			//查看收藏信息
			mui('.mui-scroll').on('tap','span',function(){
		        utils.showWaiting();
		        var hsw = openNewWin('_www/src/work/bszn_info.html?serviceOid=' + this.getAttribute("serviceId"),{bounce:'none'}, 'bszn_info');
		        mui.fire(hsw,'getDetail',{serviceOid:this.getAttribute("serviceId")});
			});
			
			//弹层打开
			mui('.mui-table-view').on('tap','.icon-more',function(){
   				var ss =$(this).offset().top; 
  				var id =  this.getAttribute("id");
  				mui('#middlePopover').popover('toggle',document.getElementById(id));
 				if(ss>340){
					$('.more_message').css('top',ss-63+"px");
					$('.more_message .more_message_box>i').css({'top':'1.07rem','background':'url(../../images/work/arrow_down.png) no-repeat'})
				}else{
					$('.more_message').css('top',ss+27+"px")
					$('.more_message .more_message_box>i').css({'top':'-.15rem','background':'url(../../images/work/arrow_up.png) no-repeat'})
				}
				//取消收藏
				cancelCollect(id);
 				
			});
			//取消收藏
			function cancelCollect(id){
				 mui('#middlePopover').on('tap','.mui-scroll',function(){
				 	var param = 'oid=' + id + '&random=' + Math.random();
				 	var url = 'appHttpService/cancelCollect.do';
		        	utils.ajax(url,function(data){
		        		var data =  JSON.parse(data);
		        		if (data.state == 0 && data.total > 0){
		        			mui.toast("取消成功");
		        			//取消以后刷新
		        			pulldownRefresh();
 		        		}else {
 		        			mui.toast("取消失败");
  		        		}
 		        		mui('#middlePopover').popover('hide');
		        	},param);
		      });
			}
	 
       //菜单触摸
	    var swipers = new Swiper('.swiper-containers', {
	        slidesPerView:3,
	        paginationClickable: true,
	        spaceBetween:8
	    });
	    $('.swiper-wrapper .swiper-slide').click(function(){
	    	$('.swiper-wrapper .swiper-slide').removeClass('slide_active');
	    	$(this).addClass('slide_active');
	    })
		</script>
	</body>

</html>